<!DOCTYPE html>
<html ng-app="app" lang="en">
    <head>
        <meta charset="UTF-8">
        <title ng-bind="title"></title>
        <link rel="stylesheet" href="../../style/css/bootstrap.css">
        <link rel="stylesheet" href="../../style/css/matrix-style.css">
        <link rel="stylesheet" href="rating.css">
        <script src="../../../node_modules/angular/angular.js"></script>
        <script src="../../a.ui.js"></script>
        <script src="rating.js"></script>
        <script>
            // bootstrap app
            var app = angular.module('app', ['a.ui']);
            app.controller('RatingDemoCtrl', function ($scope) {
                $scope.title = 'Rating';
                $scope.rate = 7;
                $scope.max = 10;
                $scope.isReadonly = false;

                $scope.hoveringOver = function (value) {
                    $scope.overStar = value;
                    $scope.percent = 100 * (value / $scope.max);
                };

                $scope.ratingStates = [
                    {stateOn: 'glyphicon-ok-sign', stateOff: 'glyphicon-ok-circle'},
                    {stateOn: 'glyphicon-star', stateOff: 'glyphicon-star-empty'},
                    {stateOn: 'glyphicon-heart', stateOff: 'glyphicon-ban-circle'},
                    {stateOn: 'glyphicon-heart'},
                    {stateOff: 'glyphicon-off'}
                ];
            })
        </script>
    </head>
    <body>
        <div class="container" ng-controller="RatingDemoCtrl">
            <h1 class="text-center" ng-bind="title"></h1>
            <h4>默认</h4>
            <a-rating ng-model="rate" max="max" read-only="isReadonly" on-hover="hoveringOver(value)" on-leave="overStar = null" titles="['one','two','three']" aria-labelledby="default-rating"></a-rating>
            <span class="label" ng-class="{'label-warning': percent<30, 'label-info': percent>=30 && percent<70, 'label-success': percent>=70}" ng-show="overStar && !isReadonly">{{percent}}%</span>

            <pre style="margin:15px 0;">Rate: <b>{{rate}}</b> - Readonly is: <i>{{isReadonly}}</i> - Hovering over: <b>{{overStar || "none"}}</b></pre>

            <button type="button" class="btn btn-sm btn-danger" ng-click="rate = 0" ng-disabled="isReadonly">清除</button>
            <button type="button" class="btn btn-sm btn-default" ng-click="isReadonly = ! isReadonly">切换只读</button>
            <hr/>

            <h4>自定义图标</h4>
            <div ng-init="x = 5">
                <a-rating ng-model="x" max="15" state-on="'glyphicon-ok-sign'" state-off="'glyphicon-ok-circle'" aria-labelledby="custom-icons-1"></a-rating>
                <b>(<i>Rate:</i> {{x}})</b>
            </div>
            <div ng-init="y = 2">
                <a-rating ng-model="y" rating-states="ratingStates" aria-labelledby="custom-icons-2"></a-rating>
                <b>(<i>Rate:</i> {{y}})</b>
            </div>
        </div>
    </body>
</html>